import React from 'react'
import "../assets/index.css"
class Index extends React.Component{
    constructor(){
        super()
        this.state = {
            val:'欢迎来到我的TODOList',
            logList:[],
            inpVal:"",
            flag:0,
            selectList:[],
            unselectList:[],

        }
    }
    handleChange = (e) => {

        this.setState({
            inpVal: e.currentTarget.value
 
        })
        
 
    }
    add(){
        const newList=[...this.state.logList];
        const inpVal = this.state.inpVal
        if(inpVal){
            newList.push({name:inpVal,statu:false})
            this.setState({
                logList:newList,
                inpVal:""
            },()=>{
                this.filter()
                console.log(this.state.logList);
            })
            
        }
        
        
        
        // console.log(typeof this.state.logList);
    }
    
    checkchange=(index,e)=>{
        const newList=[...this.state.logList];
        newList[index].statu=!newList[index].statu;
        this.setState({
            logList:newList
        })
        console.log(this.state.logList[index].statu);
        this.filter()
    }
    remove=(index)=>{
        this.state.logList.splice(index,1)
        this.setState({
            logList:this.state.logList
        })
       console.log(this.state.logList);
       this.filter()
         }
    filter(){
        let selectarr =[]
        let unselectarr=[]
        let list =this.state.logList
        for(let i = 0;i<list.length;i++){
            if(list[i].statu===true){
                selectarr.push(list[i])
            }else{
                unselectarr.push(list[i])
            }
        }
        // console.log(arr);
        this.setState({
            selectList:selectarr,
            unselectList:unselectarr,
        })
    }
    all(){
        this.setState({
            flag:0
        })
    }
    select(){
        this.setState({
            flag:1
        })
    }
    unselect(){
        this.setState({
            flag:2
        })
        console.log(this.state.unselectList);
    }

    render(){
        let {val,logList,selectList,flag,unselectList} = this.state
        return(
            <div className='container'>
                <h2>{val}</h2>
                <p className="input">
                <input type="text" value={this.state.inpVal} onChange={this.handleChange} placeholder="请输入您要添加的内容" className="fInput"></input>
                <button className="add" onClick={this.add.bind(this)}>添加</button>
                </p>
                <p className="show">展示：</p>
                <button className="button" onClick={this.all.bind(this)}>全部日志</button>
                <button className="button" onClick={this.select.bind(this)}>已完成</button>
                <button className="button" onClick={this.unselect.bind(this)}>未完成</button>
                <div className={flag===0?"active":""}>
                    {
                            logList.map((item,index) => {
                                return <li  className='logName' key={item.name}>
                                <input type="checkbox" name="finish" checked={item.statu} onChange={this.checkchange.bind(this,index)}/>
                                {item.name}
                                <button onClick={this.remove.bind(this,index)}>删除</button>
                                </li>
                            },)
                        }
                </div>
                <div className={flag===1?"active":""}>
                    {        
                             selectList.map((item,index) => {
                                // if(this.filter.item!=="")
                                return <li  className='logName' key={item.name}>
                                <input type="checkbox" name="finish" checked={item.statu} onChange={this.checkchange.bind(this,index)}/>
                                {item.name}
                                <button onClick={this.remove.bind(this,index)}>删除</button>
                                </li>
                            },)
                            
                        }
                </div>
                <div className={flag===2?"active":""}>
                    {        
                             unselectList.map((item,index) => {
                                // if(this.filter.item!=="")
                                return <li  className='logName' key={item.name}>
                                <input type="checkbox" name="finish" checked={item.statu} onChange={this.checkchange.bind(this,index)}/>
                                {item.name}
                                <button onClick={this.remove.bind(this,index)}>删除</button>
                                </li>
                            },)
                            
                        }
                </div>
                
            </div>
        )
    }
}
export default Index